import UploadFile from "@/components/FileUpload";
import { ColProps, Form, Input, Modal, Select } from "antd";
import React, { useCallback, useMemo } from "react";

type LabelAddModalProps = {
  open: boolean
  isEntry: boolean
  onClose: () => void
  onOk: (bannerId: number) => void
}

export function useAddBanner(props: LabelAddModalProps) {
  const [form] = Form.useForm()


  const layout = useMemo<{
    labelCol: ColProps
    wrapperCol: ColProps
  }>(() => {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    }
  }, [])


  const handleSubmit = useCallback(() => {

    const submit = async () => {
      const result = await form.validateFields()
      if (result) {
        props.onOk(result)
      }
    }

    submit()

  }, [form, props])


  const title = useMemo<string>(() => {
    return props.isEntry ? '新增快捷导航' : '新增宣传标签'
  }, [props.isEntry])

  return {
    form,
    layout,
    handleSubmit,
    title
  }
}



export function LabelAddModal(props: LabelAddModalProps) {

  const { form, layout, handleSubmit, title } = useAddBanner(props)
  return (
    <Modal
      destroyOnClose
      visible={props.open}
      onCancel={props.onClose}
      title={title}
      onOk={() => {
        handleSubmit()
        props.onClose()
      }}

    >
      <Form form={form} {...layout} >
        <Form.Item
          label="标题"
          required
          name="name"
          rules={[
            { required: true, message: '标题必填' }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="上传图标"
          required
          name="image_url"
          rules={[
            { required: true, message: '图片必传' }
          ]}
        >
          <UploadFile />
        </Form.Item>
        {
          props.isEntry && <Form.Item
            label="选择链接"
            name="link"
          >
            <Select style={{ width: '100%' }}>
              <Select.Option>商品分类</Select.Option>
            </Select>
          </Form.Item>

        }
      </Form>
    </Modal>
  )
}